<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="uname">
                <el-input v-model="ruleForm.uname"></el-input>
            </el-form-item>

            <el-form-item label="上传图片">
                <el-upload
                        list-type="picture-card"
                        action="#"
                        :limit="1"
                        :file-list="fileList"
                        :auto-upload="false"
                        :accept="accept"
                        :on-change="changeImag"
                        :on-exceed="handleExceed"
                        :before-remove="beforeRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    export default {
        name: "EideUsers.vue",
        data(){
            return{
                fileList:[],
                accept: ".jpg,.png",
                ruleForm: {
                    uname: '',
                },
                img:"",
                rules: {
                    uname: [
                        { min: 3, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        methods:{
            getdata(id){
                this.fileList = []
                this.$axios.get("usersbyid.action/"+id).
                then(request=>{
                    console.log(request.data)
                    this.ruleForm = request.data
                    if (request.data.usersTopImg!=null){
                        this.fileList.push({
                            name:request.data.usersTopImg,
                            url:"http://127.0.0.1:9090/demo/"+request.data.usersTopImg
                        })
                    }
                }).
                catch()
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let users = new FormData();

                        users.append("id",this.ruleForm.id)
                        users.append("img",this.img.raw)
                        users.append("uName",this.ruleForm.uname)

                        //调用异步，进行申请
                        this.$axios({
                            method: 'post',
                            url: "editusers.action",
                            data: users,
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }).then(res => {
                            if(res.data.msg=="修改成功"){
                                this.$message.success(res.data.msg);
                                this.$parent.$parent.dialogVisible=false
                                 this.$parent.$parent.getdata()
                            }else {
                                this.$message.error("修改失败");
                            }
                        }).catch(err => {
                            this.$message.warning(err);
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            changeImag(file, fileList) {
                //获取文件信息
                this.img = file;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`只能选择一个头像`)
            },
            beforeRemove(file, fileList) {
                if (this.$confirm(`确定移除 ${file.name}？`)) {
                    this.img = file;
                }
            },
        },
        created() {

        }

    }
</script>

<style scoped>

</style>